<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API接口使用示例</title>
    <!-- 引入依赖 -->
    <script src="./js/axios/index.js"></script>
    <script src="./js/api.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .example-container {
            background: white;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .code-block {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            border-left: 4px solid #007bff;
            margin: 10px 0;
            overflow-x: auto;
        }
        .result-block {
            background: #e9f7ef;
            padding: 15px;
            border-radius: 4px;
            border-left: 4px solid #28a745;
            margin: 10px 0;
        }
        .error-block {
            background: #f8d7da;
            padding: 15px;
            border-radius: 4px;
            border-left: 4px solid #dc3545;
            margin: 10px 0;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .config-section {
            background: #fff3cd;
            padding: 15px;
            border-radius: 4px;
            border-left: 4px solid #ffc107;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>🚀 API接口管理器使用示例</h1>
    
    <div class="config-section">
        <h3>📋 当前API配置</h3>
        <div>基础URL: <span id="baseUrl"></span></div>
        <div>超时时间: <span id="timeout"></span>ms</div>
        <div>版本: <span id="version"></span></div>
    </div>
    
    <div class="example-container">
        <h3>1. 获取文件列表</h3>
        <div class="code-block">
<pre>API.files.getList({ page: 0, rows: 10 })
    .then(response => {
        if (response.isSuccess()) {
            console.log('文件列表:', response.getData());
        } else {
            console.error('获取失败:', response.getError());
        }
    });</pre>
        </div>
        <button onclick="testGetFileList()">测试获取文件列表</button>
        <div id="fileListResult"></div>
    </div>
    
    <div class="example-container">
        <h3>2. 搜索文件</h3>
        <div class="code-block">
<pre>API.files.search('关键词', { page: 0, rows: 5 })
    .then(response => {
        if (response.isSuccess()) {
            console.log('搜索结果:', response.getData());
        }
    });</pre>
        </div>
        <input type="text" id="searchKeyword" placeholder="输入搜索关键词" style="padding: 8px; margin-right: 10px;">
        <button onclick="testSearchFiles()">测试搜索文件</button>
        <div id="searchResult"></div>
    </div>
    
    <div class="example-container">
        <h3>3. 获取下载链接</h3>
        <div class="code-block">
<pre>const downloadUrl = API.files.getDownloadUrl(fileId);
console.log('下载链接:', downloadUrl);</pre>
        </div>
        <input type="number" id="fileId" placeholder="输入文件ID" style="padding: 8px; margin-right: 10px;">
        <button onclick="testGetDownloadUrl()">获取下载链接</button>
        <div id="downloadResult"></div>
    </div>
    
    <div class="example-container">
        <h3>4. API响应处理示例</h3>
        <div class="code-block">
<pre>API.files.getList()
    .then(response => {
        // 检查是否成功
        if (response.isSuccess()) {
            const data = response.getData();
            // 处理成功数据
        } else {
            const errorMsg = response.getError();
            // 处理错误
        }
        
        // 获取状态码
        console.log('状态码:', response.status);
    });</pre>
        </div>
        <button onclick="testErrorHandling()">测试错误处理</button>
        <div id="errorResult"></div>
    </div>
    
    <div class="example-container">
        <h3>5. 扩展新接口示例</h3>
        <div class="code-block">
<pre>// 在api.js中添加新接口
files: {
    // 现有接口...
    
    // 新增接口
    createFolder: (folderName, parentId = null) => {
        return this.http.post('/createFolder', { 
            name: folderName, 
            parentId 
        });
    },
    
    moveFile: (fileId, targetFolderId) => {
        return this.http.put('/moveFile', { 
            fileId, 
            targetFolderId 
        });
    }
}

// 使用新接口
API.files.createFolder('新文件夹')
    .then(response => {
        if (response.isSuccess()) {
            console.log('文件夹创建成功');
        }
    });</pre>
        </div>
        <p><strong>📝 说明：</strong> 按照这种模式，可以轻松添加新的API接口，保持代码的可维护性。</p>
    </div>

    <script>
        // 显示当前配置
        document.getElementById('baseUrl').textContent = API_CONFIG.BASE_URL;
        document.getElementById('timeout').textContent = API_CONFIG.TIMEOUT;
        document.getElementById('version').textContent = API_CONFIG.VERSION;
        
        // 测试函数
        function testGetFileList() {
            const resultDiv = document.getElementById('fileListResult');
            resultDiv.innerHTML = '<div style="color: #007bff;">正在请求...</div>';
            
            API.files.getList({ page: 0, rows: 5 })
                .then(response => {
                    if (response.isSuccess()) {
                        const data = response.getData();
                        resultDiv.innerHTML = `
                            <div class="result-block">
                                <strong>✅ 请求成功</strong><br>
                                数据条数: ${data.data ? data.data.length : 0}<br>
                                总数: ${data.total || 0}<br>
                                <details>
                                    <summary>查看详细数据</summary>
                                    <pre>${JSON.stringify(data, null, 2)}</pre>
                                </details>
                            </div>
                        `;
                    } else {
                        resultDiv.innerHTML = `
                            <div class="error-block">
                                <strong>❌ 请求失败</strong><br>
                                错误信息: ${response.getError()}<br>
                                状态码: ${response.status}
                            </div>
                        `;
                    }
                });
        }
        
        function testSearchFiles() {
            const keyword = document.getElementById('searchKeyword').value;
            const resultDiv = document.getElementById('searchResult');
            
            if (!keyword.trim()) {
                resultDiv.innerHTML = '<div class="error-block">请输入搜索关键词</div>';
                return;
            }
            
            resultDiv.innerHTML = '<div style="color: #007bff;">正在搜索...</div>';
            
            API.files.search(keyword, { page: 0, rows: 5 })
                .then(response => {
                    if (response.isSuccess()) {
                        const data = response.getData();
                        resultDiv.innerHTML = `
                            <div class="result-block">
                                <strong>✅ 搜索成功</strong><br>
                                关键词: "${keyword}"<br>
                                找到结果: ${data.data ? data.data.length : 0} 条<br>
                                <details>
                                    <summary>查看搜索结果</summary>
                                    <pre>${JSON.stringify(data, null, 2)}</pre>
                                </details>
                            </div>
                        `;
                    } else {
                        resultDiv.innerHTML = `
                            <div class="error-block">
                                <strong>❌ 搜索失败</strong><br>
                                错误信息: ${response.getError()}
                            </div>
                        `;
                    }
                });
        }
        
        function testGetDownloadUrl() {
            const fileId = document.getElementById('fileId').value;
            const resultDiv = document.getElementById('downloadResult');
            
            if (!fileId.trim()) {
                resultDiv.innerHTML = '<div class="error-block">请输入文件ID</div>';
                return;
            }
            
            const downloadUrl = API.files.getDownloadUrl(fileId);
            resultDiv.innerHTML = `
                <div class="result-block">
                    <strong>✅ 下载链接生成成功</strong><br>
                    链接: <a href="${downloadUrl}" target="_blank">${downloadUrl}</a>
                </div>
            `;
        }
        
        function testErrorHandling() {
            const resultDiv = document.getElementById('errorResult');
            resultDiv.innerHTML = '<div style="color: #007bff;">测试错误处理...</div>';
            
            // 故意请求一个不存在的接口来测试错误处理
            API.files.getDetail('nonexistent')
                .then(response => {
                    resultDiv.innerHTML = `
                        <div class="result-block">
                            <strong>📊 错误处理测试完成</strong><br>
                            响应成功: ${response.isSuccess()}<br>
                            状态码: ${response.status}<br>
                            错误信息: ${response.getError()}<br>
                            数据: ${JSON.stringify(response.getData())}
                        </div>
                    `;
                });
        }
    </script>
</body>
</html>